<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">
<link rel="stylesheet" href="demo.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
<script src="demo.js"></script>
</head>

<body>

<style>
    @import url('https://ui.gg/lib/font/font.css');

    i {font-size: 30px;display: block;padding: 10px 0;}
    u {text-transform: uppercase;text-decoration: none;}
    p {font-size: 16px;padding: 10px 0;}
</style>

<!----------------------------------------------------------------------------------------->

<section class="subject">
    <div class="sider">
        <x class="ico ico-menu"></x>
        <fold show>
            <fold-group>
                <fold-title><i class="ico ico-earth"></i><h5>web font</h5><u></u></fold-title>
                <fold-cont>
                    <a class="aclonica">aclonica</a>
                    <a class="aller">aller</a>
                    <a class="amaranth">amaranth</a>
                    <a class="arvo">arvo</a>
                    <a class="avenir">avenir</a>
                    <a class="clarendon">clarendon</a>
                    <a class="din">din</a>
                    <a class="encode">encode</a>
                    <a class="geo">geo</a>
                    <a class="gotham">gotham</a>
                    <a class="kanit">kanit</a>
                    <a class="lat">lat</a>
                    <a class="montserrat">montserrat</a>
                    <a class="moto">moto</a>
                    <a class="museo">museo</a>
                    <a class="neo">neo</a>
                    <a class="overpass">overpass</a>
                    <a class="philosopher">philosopher</a>
                    <a class="portada">portada</a>
                    <a class="raleway">raleway</a>
                    <a class="read">read</a>
                    <a class="renault">renault</a>
                    <a class="roboto">roboto</a>
                    <a class="santander">santander</a>
                    <a class="steel">steel</a>
                    <a class="tanseek">tanseek</a>
                    <a class="ubuntu">ubuntu</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-display"></i><h5>local font</h5><u></u></fold-title>
                <fold-cont>
                    <a class="uigg">uigg</a>
                    <a class="yahei">微软雅黑</a>
                    <a class="jhenghei">微软正黑</a>
                    <a class="nsimsun">新宋体</a>
                    <a class="kaiti">楷体</a>
                    <a class="lisu">隶书</a>
                    <a class="youyuan">幼圆</a>
                    <a class="fangsong">仿宋</a>
                    <a class="xingkai">华文行楷</a>
                    <a class="xinwei">华文新魏</a>
                    <a class="arial">arial</a>
                    <a class="tahoma">tahoma</a>
                </fold-cont>
            </fold-group>
        </fold>
    </div>
    <div class="contant">
        <i>abcdefghijklmnopqrstuvwxyz</i>
        <i><b>abcdefghijklmnopqrstuvwxyz</b></i>
        <i><u>abcdefghijklmnopqrstuvwxyz</u></i>
        <i><u><b>abcdefghijklmnopqrstuvwxyz</b></u></i>
        <i>,.|/\:;"'<>{}[]()-=_+`~!@#$%^&*?1234567890</i>
        <i><b>,.|/\:;"'<>{}[]()-=_+`~!@#$%^&*?1234567890</b></i>
        <p>abcdefghijklmnopqrstuvwxyz,.|/\:;"'<>{}[]()-=_+`~!@#$%^&*?1234567890</p>
        <p><b>abcdefghijklmnopqrstuvwxyz,.|/\:;"'<>{}[]()-=_+`~!@#$%^&*?1234567890</b></p>
        <p uigg="txt"></p>
   <p>时光之河缓缓地流淌着，走过春的明媚，趟过夏的繁华，涉足秋的静美，静立于冬的冷峻。一颗心在岁月的磨砺中，少了棱角，渐渐学会了适应，变得如一枚鹅卵石般的光滑。想来，生活应顺其自然，随遇而安，如行云般自在，像流水般洒脱，才是人生应有的姿态。</p>
    </div>
</section>

<!----------------------------------------------------------------------------------------->

<script>
    $('fold a').click(function(){
        $('fold a').removeClass('active')
        $(this).addClass('active')
    })
    $('.aclonica').click(function(){$('.contant *').attr('class','font-aclonica')})
    $('.aller').click(function(){$('.contant *').attr('class','font-aller')})
    $('.amaranth').click(function(){$('.contant *').attr('class','font-amaranth')})
    $('.arvo').click(function(){$('.contant *').attr('class','font-arvo')})
    $('.avenir').click(function(){$('.contant *').attr('class','font-avenir')})
    $('.clarendon').click(function(){$('.contant *').attr('class','font-clarendon')})
    $('.din').click(function(){$('.contant *').attr('class','font-din')})
    $('.encode').click(function(){$('.contant *').attr('class','font-encode')})
    $('.geo').click(function(){$('.contant *').attr('class','font-geo')})
    $('.gotham').click(function(){$('.contant *').attr('class','font-gotham')})
    $('.kanit').click(function(){$('.contant *').attr('class','font-kanit')})
    $('.lat').click(function(){$('.contant *').attr('class','font-lat')})
    $('.montserrat').click(function(){$('.contant *').attr('class','font-montserrat')})
    $('.moto').click(function(){$('.contant *').attr('class','font-moto')})
    $('.museo').click(function(){$('.contant *').attr('class','font-museo')})
    $('.neo').click(function(){$('.contant *').attr('class','font-neo')})
    $('.overpass').click(function(){$('.contant *').attr('class','font-overpass')})
    $('.philosopher').click(function(){$('.contant *').attr('class','font-philosopher')})
    $('.portada').click(function(){$('.contant *').attr('class','font-portada')})
    $('.raleway').click(function(){$('.contant *').attr('class','font-raleway')})
    $('.read').click(function(){$('.contant *').attr('class','font-read')})
    $('.renault').click(function(){$('.contant *').attr('class','font-renault')})
    $('.roboto').click(function(){$('.contant *').attr('class','font-roboto')})
    $('.santander').click(function(){$('.contant *').attr('class','font-santander')})
    $('.steel').click(function(){$('.contant *').attr('class','font-steel')})
    $('.tanseek').click(function(){$('.contant *').attr('class','font-tanseek')})
    $('.ubuntu').click(function(){$('.contant *').attr('class','font-ubuntu')})

    $('.uigg').click(function(){$('.contant *').attr('class','font-uigg')})
    $('.yahei').click(function(){$('.contant *').attr('class','font-yahei')})
    $('.jhenghei').click(function(){$('.contant *').attr('class','font-jhenghei')})
    $('.nsimsun').click(function(){$('.contant *').attr('class','font-nsimsun')})
    $('.kaiti').click(function(){$('.contant *').attr('class','font-kaiti')})
    $('.lisu').click(function(){$('.contant *').attr('class','font-lisu')})
    $('.youyuan').click(function(){$('.contant *').attr('class','font-youyuan')})
    $('.fangsong').click(function(){$('.contant *').attr('class','font-fangsong')})
    $('.xingkai').click(function(){$('.contant *').attr('class','font-xingkai')})
    $('.xinwei').click(function(){$('.contant *').attr('class','font-xinwei')})
    $('.arial').click(function(){$('.contant *').attr('class','font-arial')})
    $('.tahoma').click(function(){$('.contant *').attr('class','font-tahoma')})
</script>

</body>
</html>